<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script language="javascript" type="text/javascript" src="vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="elementUI/elementUI2.x.js"></script>
    <!--    <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/register.css" type="text/css">
</head>
<body>
    <el-container>
        <div class="container">
            <div id="register" v-loading.fullscreen.lock="loading"
                 element-loading-text="正在发送邮件，请稍后..."
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-form enctype="multipart/form-data" action="/regsiter" method="post" :model="ruleForm" status-icon
                         :rules="rules" ref="ruleForm" label-width="100px">
                    <el-row>
                        <el-col :span="24"><h1>用户注册</h1></el-col>
                    </el-row>
                    <!--                后台消息弹框-->
                    <div ref="info" v-show="false" th:text="${msg}"></div>
                    <!-- 分割线-->
                    <el-divider></el-divider>

                    <el-form-item label="头像" prop="userImg">
                        <el-upload
                                class="avatar-uploader"
                                name="userImg"
                                action="/regsiter"
                                :auto-upload="false"
                                :show-file-list="false"
                                :on-change="imgFileChange"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.userImg" :src="ruleForm.userImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="user_mail">
                        <el-input name="user_mail" v-model="ruleForm.user_mail"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" show-password name="user_pwd" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" show-password @change="getPass" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="uname">
                        <el-input name="user_name" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期" required>
                        <el-col :span="11">
                            <el-form-item prop="date">
                                <el-date-picker name="user_birthday" type="date" placeholder="选择日期" v-model="ruleForm.date"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <input type="radio" value="男" name="user_sex">男&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" value="女" name="user_sex">女
                    </el-form-item>
                    <el-form-item label="身份证号" prop="id_card">
                        <el-input name="id_card" v-model="ruleForm.id_card"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <!--用于跳转-->
                        <input type="submit" ref="regBtn" v-show="false">
                        <a href="/gologin" style="{color:#fff;text-decoration: none;}">
                            <el-button>返回</el-button>
                        </a>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </el-container>

<script language="javascript" type="text/javascript">
    var validateIdCard = (rule, value, callback) => {
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(value)) {
            callback(new Error('身份证信息有误！'));
        } else {
            callback();
        }
    }
    var pass = "";
    var validatePass = (rule, value, callback) =>  {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== pass) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    }
    var vm = new Vue({
        el: '#register',
        data: {
            ruleForm: {
                userImg: '',
                user_mail: '',
                pass: '',
                checkPass: '',
                uname: '',
                date: '',
                sex: '',
                id_card:''
            },
            rules: {
                user_mail: [
                    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                pass: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                checkPass: [
                    {required: true, validator: validatePass, trigger: 'blur'}
                ],
                uname: [
                    {required: true, message: '请输入昵称', trigger: 'blur'}
                ],
                date: [
                    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                ],
                id_card: [
                    {required: true, validator: validateIdCard, trigger: 'blur'}
                ],
            },
            loading: false
        },
        mounted: function(){
            if(this.$refs.info.innerHTML!=""){
                this.$message({
                    message: this.$refs.info.innerHTML,
                    type: 'error'
                });
            }
        },
        methods: {
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        return false;
                    } else {

                        this.$refs.regBtn.click();
                        this.loading=true;
                    }
                });
            },
            getPass: function () {
                pass = this.ruleForm.pass;
            },
            //头像上传
            imgFileChange(file){
                this.ruleForm.userImg = URL.createObjectURL(file.raw);
            }
        }
    });
</script>
</body>
</html>

